<template>
    <div>
        <a-row :gutter="12" style="width: 100%;">
            <a-col
                    :xs="12"
                    :sm="12"
                    :md="6"
                    :xl="6"
                    style="height: 170px;"
                    class="aCol">
                <a-card style="height: 100%;width: 100%" title="司机总数" :bordered="false">
                    <div style="padding-bottom: 12px">
                        <div style="text-align: center;font-size: 25px">
                            9999999
                        </div>
                        <div style="padding-top:12px;text-align: left" class="icons">
                            <span class="pointer"><a-icon type="sync"/></span>
                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col
                    :xs="12"
                    :sm="12"
                    :md="6"
                    :xl="6"
                    style="height: 170px;"
                    class="aCol">
                <a-card hoverable style="height: 100%;width: 100%" title="会员总数" :bordered="false">
                    <div style="padding-bottom: 12px">
                        <div style="text-align: center;font-size: 25px">
                            88888888
                        </div>
                        <div style="padding-top:12px;text-align: left" class="icons">
                            <span class="pointer"><a-icon type="sync"/></span>
                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col
                    :xs="12"
                    :sm="12"
                    :md="6"
                    :xl="6"
                    style="height: 170px;"
                    class="aCol">
                <a-card hoverable style="height: 100%;width: 100%" title="司机接单总数" :bordered="false">
                    <div style="padding-bottom: 12px">
                        <div style="text-align: center;font-size: 25px">
                            5555555
                        </div>
                        <div style="padding-top:12px;text-align: left" class="icons">
                            <span class="pointer"><a-icon id="one" @click="click" type="sync" spin/></span>
                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col
                    :xs="12"
                    :sm="12"
                    :md="6"
                    :xl="6"
                    style="height: 170px;"
                    class="aCol">
                <a-card hoverable style="height: 100%;width: 100%" title="待处理申请数" :bordered="false">
                    <div style="padding-bottom: 12px">
                        <div style="text-align: center;font-size: 25px">
                            6666666
                        </div>
                        <div style="padding-top:12px;text-align: left" class="icons">
                            <span class="pointer"><a-icon type="sync"/></span>
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
        <a-row style="width: 100%">
            <a-card hoverable style="height: 100%;width: 100%">
                <sj-table :SjDataSource="SjDataSource" slot="cover"></sj-table>
            </a-card>
        </a-row>
    </div>

</template>

<script>
    import SjTable from '@views/my/manage/SjGl/SjTable'
    import {getAction} from '@/api/manage'

    export default {
        name: 'SjManage',
        mixin: {SjTable},
        components: {
            SjTable
        },
        data() {
            return {
                SjDataSource: [],
                url: {
                    getSjInfoList: "/my/sjInfo/getSjInfoList",
                }
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            click() {
                console.log(this);
                console.log(this.spin);
                this.spin = false;
                console.log()
            },
            //初始化数据的方法
            loadData() {
                console.log(this.url.getSjInfoList);
                getAction(this.url.getSjInfoList).then((res) => {
                    if (res.success) {
                        console.log('SjDataSource', res.result);
                        this.SjDataSource = res.result;
                        for (var i = 0; i < this.SjDataSource.length; i++) {
                            this.SjDataSource[i].key = i + 1;
                        }
                    }else {
                        console.log("获取错误")
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .pointer {
        cursor: pointer;
        float: right;
        z-index: -1;
    }

    .icons {
        font-size: 18px;
        color: #2eabff;
    }

    .JjStyle {
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .aCol {
        height: 100%;
        margin-bottom: 18px;
    }
</style>